import React, {Component} from "react";
import {formatDate, restApiRequest} from "../Public/Api/Public";
import pic_receipt_corner_tag from "../../images/pic_receipt_corner_tag.png";
import receipt_bg_shadow from "../../images/receipt_bg_shadow.png";
import BlockButton from "../Public/Components/BlockButton";
import {Modal} from "antd-mobile";

const alert = Modal.alert;

export default class Order extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
      data: this.props.location.state,
    };
  }

  refreshOrder(sessionKey, order_num) {
    let order_url = '/shop/api/getList';       //获取订单详情
    let paramer = {order_num: order_num, sessionkey: sessionKey};
    let jsonData = restApiRequest.getSign(paramer);

    restApiRequest.fetchp(order_url, jsonData).then((response) => {
      // console.log(response);
      if (!response.ok) {
        let error = new Error(response.statusText);
        error.response = response;
        throw error;
      } else {
        return response.json();
      }
    }).then((response_json) => {
      // console.log(response_json);
      let res_code = response_json.code;
      if (res_code === '0000') {
        this.setState({
          data: response_json.data.order_list[0],
        });
          this.props.history.push({
          pathname: '/Order',

        })

      }
    }).catch((ex) => {
      console.log(ex);
    });
  }
  orderRefund(order_num) {

    alert('温馨提醒', '退款会作废所有未使用消费码，是否仍要继续?',
      [
        {
          text: '取消',
          onPress: () => console.log('取消'),
          style: 'default'
        },
        {
          text: '确定',
          onPress: () => {
            let refund_url = '/shop/api/refund';       //用户退款
           let sessionKey =localStorage.getItem('sessionkey');
              if (sessionKey === null) {
                this.props.nav.push({
                  id: 'Login',
                })
              } else {
                let paramer = {order_num: order_num, sessionkey: sessionKey};
                let jsonData = restApiRequest.getSign(paramer);

                restApiRequest.fetchp(refund_url, jsonData).then((response) => {
                  // console.log(response);
                  if (!response.ok) {
                    let error = new Error(response.statusText);
                    error.response = response;
                    throw error;
                  } else {
                    return response.json();
                  }
                }).then((response_json) => {
                  // console.log(response_json);
                  let res_code = response_json.code;
                  if (res_code === '0000') {
                    this.refreshOrder(sessionKey, order_num);
                  } else {
                    alert(response_json.msg);
                  }
                }).catch((ex) => {
                  console.log(ex);
                });
              }
          },
          style: 'default'
        },
      ],
    );
  }


  render() {

    return (
      <div>

        <section className="order-detail-toptips"/>

        <section className="order-detail-wrap">

          <section className="order-detail-title">{this.state.data.major_product_shortname}+{this.state.data.spec_date}</section>

          <section className="order-detail-guide">
            <span>规格选择：</span>
            <span>{this.state.data.spec_product_name}</span>
          </section>

          <div className="order-line-solid"/>

          <ul className="order-detail-msg">

            <li>
              <span>订单编号：</span>
              <span>{this.state.data.order_num}</span>
            </li>

            <li>
              <span>手机号码：</span>
              <span>{this.state.data.cell_number}</span>
            </li>

            {
              this.state.data.order_info.map(
                (i, item) => (
                  <div key={item}>
                    {this.state.data.order_info[item].id_card?
                      <li>
                        <span>身份证号：</span>
                        <span>{this.state.data.order_info[item].id_card}</span>
                      </li>:null
                    }
                    {this.state.data.order_info[item].contact_name?
                      <li>
                        <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
                        <span>{this.state.data.order_info[item].contact_name}</span>
                      </li>:null
                    }
                  </div>
                )
              )
            }

            <li>
              <span>购买时间：</span>
              <span>{formatDate.format(this.state.data.add_time)}</span>
            </li>

            <li>
              <span>数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量：</span>
              <span>{this.state.data.amount}</span>
            </li>

            <li>
              <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</span>
              <span>{'¥ ' + this.state.data.price}</span>
            </li>

          </ul>

          <div className="order-line-solid"/>

          <ul className="order-detail-xfm">
            {
              this.state.data.secret_num != null ? this.state.data.secret_num.map(
                (i, item) => (
                  <li key={item}>
                    <section>
                      <span>消费码</span>
                      {
                        i.state == 0 ?
                          <span>{i.secret_num.replace(/\D+/g, '').replace(/(\d{4})/g, '$1-').replace(/\s*$/, '')}</span>
                          : null
                      }
                      {
                        i.state == 1 ?
                          <span className="order-detail-xfm-ysy">{i.secret_num.replace(/\D+/g, '').replace(/(\d{4})/g, '$1-').replace(/\s*$/, '')}</span> : null
                      }
                      {
                        i.state == 2 ?
                          <span className="order-detail-xfm-ytk">{i.secret_num.replace(/\D+/g, '').replace(/(\d{4})/g, '$1-').replace(/\s*$/, '')}</span> : null
                      }

                    </section>
                    {
                      i.state == 0 ? <section className="order-detail-wsy">未使用</section> : null
                    }
                    {
                      i.state == 1 ? <section className="order-detail-ysy">已使用</section> : null
                    }
                    {
                      i.state == 2 ? <section className="order-detail-ytk">已退款</section> : null
                    }

                  </li>)) : null
            }
          </ul>

          <div className="order-line-solid"/>

          <section className="order-detail-explain">
            <p className="order-detail-explain-title">使用说明</p>
            {JSON.parse(this.state.data.major_product_instruction_json).map((data, i) => (
              <section key={i} className="product-instructions"  style={{padding: 0, marginTop: '.2rem'}}>
                <span>{data.keyword + ':'}</span>
                <span>{data.value}</span>
              </section>
            ))}
          </section>

          <section className="order-img-tips">
            <img src={pic_receipt_corner_tag}/>
          </section>
          <img src={receipt_bg_shadow} className="order-img-bg"/>

        </section>


        <section className="order-detail-btnwrap">

          {
            this.state.data.order_state == 3 ? null :
              this.state.data.major_product_type == 1 ? this.state.data.allow_refund == 3 ?
                <BlockButton
                  btnName={'退款'}
                  onPress={this.orderRefund.bind(this, this.state.data.order_num)}
                  bgColor={'#E9EAEC'}
                  btnHeight={'.96rem'}
                  btnWidth={'9.14rem'}
                  textColor={'#9B9B9B'}
                  textSize={'.45rem'}
                  className={'order-detail-btn'}
                /> : null : null
          }

        </section>

      </div>


    )
  }
}
